<template>
  <el-card class="max-view-height">
    <search-form :model="searchForm" @search="search" @reset="search">
      <el-form-item label="姓名或手机号">
        <el-input v-model="searchForm.title" clearable maxlength="20" />
      </el-form-item>
    </search-form>
    <el-tabs v-model="activeName" @tab-click="tabClick">
      <el-tab-pane label="已结算用户" name="2">
        <el-row
          v-if="activeName == '2'"
          v-loading="config.loading"
          class="table-container"
        >
          <abstract-table :data="tableData" :height="tableMaxHeight">
            <el-table-column
              align="center"
              label="姓名"
              prop="users_name"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="电话"
              prop="users_tel"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="岗位"
              prop="orgPost_title"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="总分"
              prop="allScore"
              show-overflow-tooltip
            >
              <template v-slot="{ row }">
                {{ row.scoreJson && row.scoreJson.all }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="150px">
              <template v-slot="{ row }">
                <el-button type="text" size="small" @click="toDetail(row)"
                  >详情</el-button
                >
              </template>
            </el-table-column>
          </abstract-table>

          <abstract-pagination
            :model="searchForm"
            @current-change="pageChange"
            @size-change="pageSizeChange"
          />
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="未结算用户" name="1">
        <el-row
          v-if="activeName == '1'"
          v-loading="config.loading"
          class="table-container"
        >
          <abstract-table :data="tableData" :height="tableMaxHeight">
            <el-table-column
              align="center"
              label="姓名"
              prop="users_name"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="电话"
              prop="users_tel"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="岗位"
              prop="orgPost_title"
              show-overflow-tooltip
            />
            <el-table-column align="center" label="操作" width="150px">
              <template v-slot="{ row }">
                <el-button type="text" size="small" @click="toNotScore(row)"
                  >未结算情况</el-button
                >
              </template>
            </el-table-column>
          </abstract-table>

          <abstract-pagination
            :model="searchForm"
            @current-change="pageChange"
            @size-change="pageSizeChange"
          />
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
import tableMixin from '@/mixin/tablePageMixin'
import autoAdaptHeightMixin from '@/views/_common/ListPage/autoAdaptHeightMixin'
import SearchForm from '@/components/form/Search'
import { request } from '@/api/request'

export default {
  name: 'JobSummary',

  components: { SearchForm },

  mixins: [tableMixin, autoAdaptHeightMixin],

  data() {
    return {
      searchForm: {
        title: null
      },
      activeName: '2'
    }
  },

  methods: {
    tabClick() {
      this.search()
    },

    toDetail(row) {
      this.$router.push(`${this.$route.fullPath}/detail/${row.id}`)
    },

    toNotScore(row) {
      this.$router.push(`${this.$route.fullPath}/notScore/${row.id}`)
    },

    search() {
      if (this.config.loading) return
      this.config.loading = true
      request(
        'company/workSum/scoringResult/index',
        {
          p: this.searchForm.page,
          limit: this.searchForm.pageSize,
          title: this.searchForm.title,
          type: this.activeName
        },
        (res) => {
          this.searchForm.total = res.data.count
          this.tableData = res.data._list
        },
        {
          isDelNull: true
        }
      ).finally(() => {
        this.config.loading = false
      })
    }
  }
}
</script>
